<template>
	<view>
		<u-navbar :is-back="false" title="新闻"></u-navbar>
		<u-swiper :height="250" :list="swiperList" title effect3d :interval="3000" @click="clickSwiper"></u-swiper>
		<u-card :show-head="false" :show-foot="false" :border="false">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-row-between u-m-t-20 u-m-b-20"
					:class="index==news.length-1?'':'u-border-bottom'" v-for="(n,index) in news" :key="index"
					@click="clickNew(n.link)">
					<view class="u-line-2">{{n.title}}</view>
					<view>
						<image :src="n.image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</u-card>
		<u-tabbar :list="$store.state.tabbars" activeColor="#2979ff" mid-button></u-tabbar>
	</view>

</template>

<script>
	export default {
		async onLoad() {
			var [err, res] = await this.$to(this.$api.get({
				url: "/home/news"
			}));
			if (!err && res.code == 200) {
				this.news = res.data;
				for (let n of this.news) {
					n.image = "https://cdn.uviewui.com/uview/swiper/3.jpg";
				}
			} else {
				this.$toast(err ? null : res.msg);
			}
		},
		data() {
			return {
				swiperList: [{
						image: '../../static/banner1.jpg',
						title: '第八届“互联网+”创新创业大赛',
						link: "https://cy.ncss.cn/"
					},
					{
						image: '../../static/banner2.jpg',
						title: '当我们海阔天空',
						link: "https://movie.wanxue.cn/movie"
					},
					{
						image: '../../static/banner3.jpg',
						title: '一起创 一起赢',
						link: "https://developer.huaweicloud.com/college/competition-hlwplus.html"
					}
				],
				news: []
			}
		},
		methods: {
			clickSwiper(index) {
				this.naviToNews(this.swiperList[index].link);
			},
			clickNew(link) {
				this.naviToNews(link);
			},
			naviToNews(link) {
				uni.navigateTo({
					url: '../main/news',
					success: (res) => {
						res.eventChannel.emit('naviToNews', link)
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.u-body-item {
		font-size: 32rpx;
		color: #333;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	body {
		background-color: $u-bg-color;
	}
</style>
